<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" @save="search" />
    </Card>
    <List
      class="mt_20 flex"
      :dataSource="imageList"
      :total="imageTotal"
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 6 }"
    >
      <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-radio-group
              v-model:value="form.dict_id"
              button-style="solid"
              @change="radioChange"
            >
              <a-radio-button :value="item.id" v-for="item in dictList" :key="item.id">
                <span>{{ item.title }}</span>
              </a-radio-button>
            </a-radio-group>
            <a-radio-group
              v-model:value="form.image_type"
              button-style="solid"
              @change="radioChange"
              class="radio_b"
            >
              <a-radio-button value="1">横幅</a-radio-button>
              <a-radio-button value="2">竖版</a-radio-button>
              <a-radio-button value="3">方型</a-radio-button>
            </a-radio-group>
          </a-space>
          <div class="flex" style="display: flex; justify-content: flex-end">
            <a-button type="primary" @click="openImport">批量导入</a-button>
          </div>
        </div>
      </template>
      <template #listItem="{ item }">
        <div class="img">
          <a-image
            :src="item.url"
            :width="'100%'"
            :height="200"
            :fallback="require('@/assets/null.png')"
            :preview="false"
          />
          <div class="imgBg">
            <a-space>
              <eye-outlined @click.stop="openInfo(item)" />
              <a-popconfirm
                title="是否删除？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="del(item)"
              >
                <delete-outlined @click.stop="" />
              </a-popconfirm>
            </a-space>
          </div>
        </div>
      </template>
    </List>
  </div>
  <!-- 导入 -->
  <Import v-model:visible="importVisible" @reload="reload" />
  <!-- 详情 -->
  <Info
    v-model:visible="infoVisible"
    :dictList="dictList"
    :tempData="selectInfo"
    @reload="reload"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { formList } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import List from "@/components/List";
import Import from "./Import";
import Info from "./Info";
import { imagesApi } from "@/api";
import { dictApi } from "@/api/dict";
const form = ref({});
const imageList = ref([]);
const imageTotal = ref(0);
const selectInfo = ref({});
const dictList = ref([]);

const editVisible = ref<boolean>(false);
const importVisible = ref(false);
const infoVisible = ref(false);

onMounted(() => {
  getDictList();
  getData();
});

async function getData(page = 1) {
  const result = await imagesApi.page({
    page,
    ...form.value,
  });
  const { data, total } = result;
  imageList.value = data;
  imageTotal.value = total;
}
async function getDictList() {
  const data = await dictApi.getChildren({
    id: 2,
  });
  dictList.value = data;
}
function search(bool) {
  if (!bool) form.value = {};
  getData();
}
async function del(item) {
  const { id } = item;
  await imagesApi.delete({
    id,
  });

  imageList.value = imageList.value.filter((i) => i.id != id);
}
function radioChange() {
  getData();
}
function reload() {
  getData();
}
function openImport() {
  importVisible.value = true;
}
function openInfo(item) {
  selectInfo.value = item;
  infoVisible.value = true;
}
</script>

<style lang="less" scoped>
.img {
  width: 100%;
  &:hover {
    .imgBg {
      opacity: 1;
    }
  }
  .ant-image {
  }
  .imgBg {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(#000, 0.3);
    transition: all 0.25s;
  }
}
</style>
